<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      cdata: {
        category: [
          "1日",
          "2日",
          "3日",
          "4日",
          "5日",
          "6日",
          "7日",
          "8日",
          "9日",
          "10日",
          "11日",
          "12日",
          "13日",
          "14日",
          "15日",
          "16日",
          "17日",
          "18日",
          "19日",
          "20日",
          "21日",
          "22日",
          "23日",
          "24日",
          "25日",
          "26日",
          "27日",
          "28日",
          "29日",
          "30日",
          "31日"
        ],
        nowData: [
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0
        ],
        pastData: [
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0
        ],
        baseData: [
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0
        ]
      }
    };
  },
  components: {
    Chart,
  },
  watch: {
    chartData: {
      handler (newData ) {
        if (newData.energy != null) {
          const energy = newData.energy
          const energyNow = energy.now
          const energyPast = energy.past
          const energyBase = energy.base
          const category = [];
          const nowMonth = [];
          const pastMonth = []
          const base = []
          for (const energyElement of energyNow) {
            category.push(this.timestampToTime(energyElement.time))
            nowMonth.push(energyElement.energy)
          }
          for (const energyElement of energyPast) {
            pastMonth.push(energyElement.energy)
          }
          for (const energyElement of energyBase) {
            base.push(energyElement.energy)
          }
          this.cdata = {
            category: category,
            nowData: nowMonth,
            pastData: pastMonth,
            baseData: base
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
  },
  methods: {
    timestampToTime(timestamp) {
      const date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let M = (date.getMonth()+1 < 10 ? (date.getMonth()+1) : date.getMonth()+1) + '/';
      let D = date.getDate() ;
      return M+D;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
